<template>
	<view>
		<view class="pannel-item">
			<view class="section-head">
				<view class="u-p-30">
					<view class="blue-text"></view>
					<text class="u-font-32">订单信息</text>
					<text class="color-danger">*</text>
				</view>
			</view>
			<view class="msg-box u-p-b-30 u-p-l-30 u-p-r-30">
				<view class="item">
					<text class="label">编号：</text>
					<view class="text">{{form.number}}</view>
				</view>
				<view class="item">
					<text class="label">状态：</text>
					<!-- <view class="text">{{form.isoutbound?'移库方':'接收方'}}</view> -->
					<view class="text">{{form.state}}({{form.isoutbound?'移出':'接收'}})</view>
				</view>
				<view class="item">
					<text class="label">建单时间：</text>
					<view class="text">{{form.out.date}}</view>
				</view>
				<view class="item">
					<text class="label">总数量：</text>
					<view class="text">{{form.out.weight}}KG，{{form.out.quantity}}件</view>
				</view>
			</view>
		</view>
		<!-- 移库站点 至 接收站点 -->
		<view class="pannel-item">
			<view class="section-head">
				<view class="u-p-30">
					<view class="blue-text"></view>
					<text class="u-font-32">移库到</text>
				</view>
			</view>
			<view class="pack u-m-b-10 u-m-t-10 u-p-b-30 u-p-l-30 u-p-r-30">
				<view class="item">
					<view class="name">{{form.in.store.name}}</view>
					<view class="text">
						<text>移库站点</text>
					</view>
				</view>
				<view class="u-flex-1 u-text-center u-p-l-30 u-p-r-30">
					<u-icon name="arrow-rightward" color="#999" size="32"></u-icon>
					<view>
						<text class="u-font-20">运到</text>
					</view>
				</view>
				<view class="item">
					<view class="name">{{form.out.store.name}}</view>
					<view class="text">
						<text>接收站点</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 回收物清单 -->
		<view class="pannel-item">
			<view class="section-head">
				<view class="u-p-30">
					<view class="blue-text"></view>
					<text class="u-font-32">回收物清单</text>
					<text class="color-danger">*</text>
				</view>
			</view>
			<view class="u-p-l-30 u-p-r-30 u-p-b-30">
				<view >
					<goods-list :orderId="id" :deliverdetails="form.out.details"></goods-list>
				</view>
				<view class="total">
					<text>共<text class="u-font-32">{{ confirmForm.details.length }}</text>种回收物，总重量<text class="u-font-32">{{form.out.weight}}</text>，总数量<text class="u-font-32">{{form.out.quantity}}</text>件</text>
				</view>
			</view>
		</view>
		<!-- 拍照证明 -->
		<view class="pannel-item" v-if="form.out.proves.length > 0">
			<view class="section-head">
				<view class="u-p-30">
					<view class="blue-text"></view>
					<text class="u-font-32">拍照证明</text>
				</view>
			</view>
			<view class="upload-box u-m-b-10 u-m-t-10 u-p-b-30 u-p-l-30 u-p-r-30">
				<view class="item" v-for="(item, index) in form.out.proves" :key="index">
					<u-image width="200rpx" height="200rpx" :src="utils.getPic(item)" @click="seePhoto(item)">
					</u-image>
				</view>
			</view>
		</view>
		<!-- 接单小哥 -->
		<view class="pannel-item">
			<view class="section-head">
				<view class="u-p-30">
					<view class="blue-text"></view>
					<text class="u-font-32">接单小哥</text>
					<text class="color-danger">*</text>
				</view>
			</view>
			<u-cell-group>
				<u-cell-item :title="form.brother.name" :arrow="false" hover-class="none">
					<view slot="label">
						联系电话：{{form.brother.mobile}}
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
		
		<!-- 接收方操作 -->
		<view class="pannel-item" v-if="form.state == '待入库' && form.isoutbound == false">
			<view class="section-head">
				<view class="u-p-30">
					<view class="blue-text"></view>
					<text class="u-font-32">入库时间</text>
					<text class="color-danger">*</text>
				</view>
			</view>
			<u-cell-group>
				<u-cell-item :title="deliverForm.addTime?deliverForm.addTime:'请选择入库时间'" @click="timeshow = true"></u-cell-item>
				<u-picker @confirm="confirmTime" mode="time" v-model="timeshow" :params="params"></u-picker>
			</u-cell-group>
		</view>
		<!-- 接收方操作 -->
		<view class="pannel-item" v-if="form.state == '待入库' && form.isoutbound == false">
			<view class="section-head">
				<view class="u-p-30">
					<view class="blue-text"></view>
					<text class="u-font-32">入库凭证</text>
					<text class="color-danger">*</text>
				</view>
			</view>
			<view class="u-p-l-20 u-p-r-20 u-p-b-20">
				<view class="item">
					<common-upload max-count="9" @on-success="uploadSuccess" @on-remove="uploadRemove"></common-upload>
				</view>
			</view>
		</view>
		<!-- 备注 -->
		<view class="pannel-item">
			<view class="section-head">
				<view class="u-p-30">
					<view class="blue-text"></view>
					<text class="u-font-32">备注</text>
				</view>
			</view>
			<view class="u-p-l-30 u-p-r-30 u-p-b-30">
				<u-input v-if="form.state == '待入库' && form.isoutbound == false" v-model="deliverForm.remarks" type="textarea" border input-align="left" placeholder="请输入备注"/>
				<view v-else style="padding: 10px;border-color: rgb(220, 223, 230);text-align: left;border-radius: 4px;border: 1px solid #dcdfe6;min-height: 62px;">{{form.remarks}}</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-box">
			<view class="fixed-container">
				<view class="btn-group">
					<view class="u-flex">
						<view class="u-flex-1"><u-button @click="back">返回</u-button></view>
						<!-- 移库方操作 -->
						<!-- <view class="u-flex-1" v-if="form.state == '待入库' && form.isoutbound == true"><u-button type="error" size="medium" class="w-100" @click="cancelOrder">取消</u-button></view> -->
						<!-- 接收方操作 -->
						<!-- <view class="u-flex-1" v-if="form.state == '待入库' && form.isoutbound == false"><u-button type="primary" size="medium" @click="storage" class="w-100">确认入库</u-button></view> -->
					</view>
				</view>
			</view>
			<view class="fixed-placeholder"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				loading: true,
				id: 0,
				fileList: [], //图片
				form: {
					in:{
						store:{},
						details: []
					},
					out:{
						store:{},
						details: [],
						proves: []
					},
					brother: {},
					amount: 0,
				},
				confirmForm: {
					orderid: 0,
					details: [
						// {
						// 	id: 0,
						// 	name: '杂纸',
						// 	weight: 10,
						// 	price: 9.9
						// }
					],
					total: 0
				},
				packStation: [], //打包站数据

				deliverForm:{
					id:"",
					addTime: null,
					remarks: "",
					qcPic: [],
					details: [
					    // {
					    //   "typeId": 0,
					    //   "typeRemarks": "",
					    //   "weight": 0,
					    //   "price": 0
					    // }
					]
				},
				showPackdetails: false,
				packdetails:{},
				// 移库
				store: false,
				storeList: [],
				// 选择时间
				params: { //时间选择
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				timeshow: false, //时间
				fileUploadURL: getApp().globalData.fileUploadURL
			};
		},
		computed: {
			...mapState({
				// userdetail: state => state.userdetail,
				header: state => state.Authorization
			})
		},
		onLoad(opt) {
			this.id = opt.id

			this.getDetails(this.id)
			
			this.$forceUpdate()
		},
		onPullDownRefresh() {
			this.getDetails(this.id).then(()=>{
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			})
		},
		methods: {
			getDetails(id) {
				this.loading = true
				return this.$u.get('/Store/MoveOrder/Details?id=' + id).then((res) => {
					this.form = res
					
					// this.confirmForm.details = []
					let detailsArr = []
					this.form.out.details.forEach((item) => {
						item.weight = 0
						item.quantity = 0
						item.details.forEach((cell) => {
							if(item.isweighing){
								item.weight += Number(cell.weight)
							}else{
								item.quantity += Number(cell.weight)
							}
							detailsArr.push({
								typeId: item.id,
								typenames: item.name,
								typeIcon: this.fileURL+item.icon,
								name: cell.typenames,
								weight: cell.weight,
								typenames: item.name,
								id: parseInt(cell.typepath),
								on: true,
								isweighing: item.isweighing,
								typeremarks: cell.typeremarks
							})
						})
					})
					this.confirmForm.details = detailsArr
					this.loading = false
					this.setTotal()
				})
			},
			// 计算合计值
			setTotal() {
				this.confirmForm.total = 0
				this.confirmForm.details.forEach((item) => {
					this.confirmForm.total += Number(item.weight)
				})
				this.$forceUpdate()
			},
			// 入库
			// storage(){
			// 	if(this.deliverForm.addTime == null){
			// 		// 不填出库时间则上传当前时间+延后一分钟
			// 		this.deliverForm.addTime = this.$u.timeFormat(new Date().valueOf() + 60 * 1000, 'yyyy-mm-dd hh:MM')
			// 	}
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '确认要入库吗?',
			// 		success: (res)=> {
			// 			if (res.confirm) {
			// 				this.deliverForm.id = this.id
			// 				this.deliverForm.deliverdetails = []
			// 				this.confirmForm.details.forEach((item)=>{
			// 					this.deliverForm.details.push({
			// 						typeId: item.id,
			// 						weight: item.weight,
			// 						typeremarks: item.typeremarks==null?'':item.typeremarks
			// 					})
			// 				})
			// 				this.deliverForm.remarks = this.form.remarks
							
			// 				this.$u.post('/Store/TransferOrder/Storage',this.deliverForm).then((res) => {
			// 					uni.showToast({
			// 						title: res.msg
			// 					})
			// 					this.getDetails(this.id)
			// 				})
			// 			}
			// 		}
			// 	})
			// },
			// 取消订单
			// cancelOrder(){
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '确认要取消移库吗?',
			// 		success: (res)=> {
			// 			if (res.confirm) {
			// 				console.log('用户点击确定');
			// 				this.$u.get('/Store/TransferOrder/Cancel?id='+this.id).then((res) => {
			// 					uni.showToast({
			// 						title: res.msg
			// 					})
			// 					setTimeout(()=>{
			// 						this.back()
			// 					},1000)
			// 				})
			// 			}
			// 		}
			// 	})
			// },
			confirmTime(e) {
				console.log(e)
				this.deliverForm.addTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
			},
			uploadError(data, index, lists, name) {
				uni.showToast({
					icon: 'none',
					title: '提交失败，请重试'
				})
			},
			uploadSuccess(data, index, lists, name) {
				// this.deliverForm.qcPic = []
				this.deliverForm.qcPic.push(data.datas.path)
			},
			// 上传图片删除处理
			uploadRemove(index, lists, name){
				this.deliverForm.qcPic.splice(index,1);
				this.fileList.splice(index,1)
			},
			seePhoto(url) {
				uni.previewImage({
					current: 0,
					urls: [url]
				});
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		>view {
			display: flex;
			margin: 30rpx;
			// color: red;
			color: #424a5e;

		}

		>span {
			color: rosybrown;
		}

		padding-bottom: 20rpx;
	}

	.btn {
		// width: 200rpx;
		display: flex;
		justify-content: flex-end;
		margin: 30rpx;
	}

	.r-1 {
		padding: 25rpx;
		margin-top: 30rpx;
		background-color: white;
		width: 100%;
		// height: 300rpx;
		border-radius: 20rpx;
	}

	.pannel-item {
		background-color: #fff;

		&+.pannel-item {
			margin-top: 10rpx;
		}
	}

	.bd {
		.td {
			height: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}

	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		font-weight: bold;

		.total-price {
			font-size: 32rpx;
			color: $u-color-red;
		}
	}

	.bottom-box {
		.fixed-container {
			position: fixed;
			bottom: 0;
			background-color: #fff;
			width: 750rpx;
			padding-top: 0;
			height: 132rpx;
			z-index: 99;
			box-shadow: 0 0 16rpx #e7e7e7;
		}

		.fixed-placeholder {
			height: 132rpx;
			width: 750rpx;
			margin-top: 30rpx;
		}

		.total {
			line-height: 80rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin: 0;
		}

		.btn-group {
			padding: 30rpx;

			.u-flex-1+.u-flex-1 {
				margin-left: 20rpx;
			}
		}
	}

	.w-100 {
		width: 100%;
	}
	
	.pack{
	    display: flex;
	    align-items: center;
	    .item{
			width:40%;
			border: 1px solid $u-border-color;
			padding: 20rpx 10rpx;
			border-radius: 10rpx;
	        .name{
	            font-size: 28rpx;
				margin-bottom: 10rpx;
	        }
	        .text{
	            color: $u-color-gray;
				font-size: 24rpx;
	        }
	    }
	}
</style>
